Fetch API একটি আধুনিক JavaScript API যা ব্রাউজারের মাধ্যমে HTTP রিকুয়েস্ট তৈরি এবং পরিচালনা করতে ব্যবহৃত হয়। এটি মূলত XMLHttpRequest এর বিকল্প এবং AJAX এর জন্য আরও সহজ, দ্রুত, এবং কার্যকর পদ্ধতি সরবরাহ করে। Fetch API অ্যাসিঙ্ক্রোনাস কাজের জন্য প্রমিস (Promise) ভিত্তিক, যা কোডকে আরও পরিষ্কার ও পাঠযোগ্য করে তোলে।
Fetch API সাধারণত সার্ভার থেকে ডেটা ফেচ (fetch) করা বা সার্ভারে ডেটা পাঠানোর জন্য ব্যবহৃত হয়।
GET রিকুয়েস্ট ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করার উদাহরণ:
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json()) // রেসপন্সকে JSON এ রূপান্তর
.then(data => console.log(data)) // ডেটা ব্যবহার
.catch(error => console.error('Error:', error)); // ত্রুটি হ্যান্ডল
এখানে:
fetch() একটি HTTP GET রিকুয়েস্ট করে।response.json() ব্যবহার করে JSON ফরম্যাটে ডেটা রূপান্তর করা হয়।then() এর মাধ্যমে প্রাপ্ত ডেটা প্রসেস করা হয়।catch() ব্যবহার করে ত্রুটি হ্যান্ডল করা হয়।POST রিকুয়েস্ট ব্যবহার করে সার্ভারে ডেটা পাঠানোর উদাহরণ:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST', // POST মেথড নির্ধারণ
headers: {
'Content-Type': 'application/json' // JSON ডেটা ফরম্যাট নির্ধারণ
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
এখানে:
method হিসাবে POST ব্যবহার করা হয়েছে।headers সেট করা হয়েছে ডেটার ধরন নির্ধারণ করতে।body অংশে ডেটা JSON ফরম্যাটে পাঠানো হয়েছে।PUT রিকুয়েস্ট ব্যবহার করে বিদ্যমান ডেটা আপডেট করার উদাহরণ:
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: 1,
title: 'updated title',
body: 'updated body',
userId: 1
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
DELETE রিকুয়েস্ট ব্যবহার করে ডেটা মুছে ফেলার উদাহরণ:
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE'
})
.then(response => {
if (response.ok) {
console.log('Delete successful');
}
})
.catch(error => console.error('Error:', error));
এখানে, response.ok চেক করা হয়েছে রিকুয়েস্ট সফল কিনা তা নির্ধারণ করতে।
catch() এ ধরা যায় না।.then() ব্যবহার করলে কোড জটিল হয়ে যেতে পারে।Fetch API একটি আধুনিক এবং সহজ পদ্ধতি HTTP রিকুয়েস্ট পরিচালনা করার জন্য। এটি JSON ডেটা হ্যান্ডলিং, অ্যাসিঙ্ক্রোনাস কাজ, এবং বিভিন্ন HTTP মেথড সমর্থন করে, যা ডেভেলপারদের ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। যদিও এটি কিছু সীমাবদ্ধতা সহ আসে, Fetch API আজকের সময়ে AJAX এর একটি প্রধান বিকল্প এবং জাভাস্ক্রিপ্ট ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
